<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="resource/images/login/fico.ico">
<title>登录页面</title>
<link rel="stylesheet" type="text/css" href="resource/jquery-easyui-1.4.4/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="resource/jquery-easyui-1.4.4/themes/icon.css">
<link rel="stylesheet" type="text/css" href="resource/css/login.css" />
<script type="text/javascript">
if(window !=top){
	top.location.href=location.href;
}
</script>
<style>

/*在chrome下移除input[number]的上下箭头*/

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{
    -webkit-appearance: none !important;
    margin: 0;
}
/*在firefox下移除input[number]的上下箭头*/
input[type="number"]{-moz-appearance:textfield;}

.weixin-icon {
    background-position: -20px 0;
}

.weixin-icon {
    width: 19px;
    height: 18px;
    display: block;
    background: url(resource/images/login/QQ-weixin.png) no-repeat;
    margin: -11px auto;
    position: absolute;
    background-position: -20px 0;
    float: left;
    left: 0;
    top: 14px;
}

a.pdl {
    display: inline-block;
    position: relative;
    padding-left: 24px;

</style>
</head>
<body>
	<form id="loginForm" method="post" data-options="novalidate:true" class="easyui-form">
		<div class="Main">
			<ul>
				<li class="top"></li>
				<li class="top2"></li>
				<li class="topA"></li>
				<li class="topB">
					<span> 
						<img src="resource/images/login/logo.png" alt="" style="" />
					</span>
				</li>
				<li class="topC"></li>
				<li class="topD">
					
					<ul class="login">
						<li>
							<span class="left">用户名：</span> 
							<span style=""> 
								<input id="user_name" name="userName" class="txt" maxlength="12"/>
							</span>
						</li>
						<li>
							<span class="left">密码：</span>
							<span style=""> 
								<input id="password" name="password" class="txt" maxlength="12"/>
							</span>
						</li>
						<li style="display: none;">
							<span class="left"></span>
							<span style=""> 
                            	<a href="javascript:void(0)" onclick="window.location='login.shtml'"  class="pdl" style="outline: rgb(109, 109, 109) none 0px;">
                            	<b class="weixin-icon"></b><span>微信</span></a>
							</span>
						</li>
						<li>
							<span class="left"></span> 
							<span id="errMsg" style="color:red;"></span>
						</li>
					</ul>
				</li>
				<li class="topE"></li>
				<li class="middle_A"></li>
				<li class="middle_B"></li>
				<li class="middle_C">
					<span class="btn"> 
						<input type="button" value="登 录" style="width:90px;height:33px;cursor: pointer;"/>
					</span>
				</li>
				<li class="middle_D"></li>
				<li class="bottom_A"></li>
				<li class="bottom_B"></li>
			</ul>
		</div>
	</form>
	<script type="text/javascript" src="resource/js/jquery.min.js"></script>
	<script type="text/javascript" src="resource/jquery-easyui-1.4.4/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="resource/jquery-easyui-1.4.4/locale/easyui-lang-zh_CN.js"></script>
	<script type="text/javascript">
	$(document).ready(function(){
		$(".btn").click(function(){
			to_login();
		});
		$("#loginForm .txt").blur(function(){
			$("#errMsg").empty();
		});
		//回车登录
		$("#loginForm").keydown(function(event){
			if (event.keyCode == 13){
				to_login();
		    }
		});
	});
	function to_login(){
		if($("#input[type='button']").attr('disabled')==true){
        	return;
        }
        
		$('#loginForm').form('submit',{
			url:"login.shtml",
			onSubmit:function(){
				return $(this).form('enableValidation').form('validate');
			},
			success:function(data){
				var data= eval('(' + data + ')');
				console.info(data)
				if(data.success){
					$("input[type='button']").val("正在登录...");
					window.location.href="index.shtml";
				} else {
                    $("#input[type='button']").attr('disabled',false);
					$("#errMsg").html(data.msg);
				}
			}
		});
	}
	
    </script>
</body>
</html>